<template>
    <div class="right-container">
        <div class="top-item">
            <div class="ryzx-item">
                <div class="ryzx-bg">
                    <div class="ryzx-title">人员在线情况</div>
                    <div class="ryzx-content">
                        <span class="num1">{{onlinePerson[0]}}</span>
                        <span class="num-tag">/</span>
                        <span class="num2">{{onlinePerson[1]}}</span>
                    </div>
                </div>
            </div>
            <div class="ajqk-item">
                <div class="ajqk-title">
                    最新案件情况
                </div>
                <div class="hbfx-stat">
                    <div class="hbfx-stat-title">
                        <div class="title-row1">案件名称</div>
                        <div class="title-row2">案件地址</div>
                        <div class="title-row2">案件类型</div>
                        <div class="title-row2">案件等级</div>
                        <div class="title-row2">案件状态</div>
                    </div>
                    <div class="hbfxContent">
                        <ul class="hbfx-content">
                            <li v-for="(item,index) in ajqkList" :key="index" class="hbfx-stat-row">
                                <div :title="item.name" class="title-row1">{{item.eventName}}</div>
                                <div :title="item.address" class="title-row2 stat-num">{{item.eventAddress}}</div>
                                <div :title="item.type" class="title-row2 stat-num">{{item.classBigName}}</div>
                                <div :title="item.level" class="title-row2 stat-num">{{item.eventLevelName}}</div>
                                <div :title="item.eventStatusName" class="title-row2 stat-num" :class="getStatusClass(item.eventStatusName)">{{item.eventStatusName}}</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-middle-item">
            <div class="relative">
                <div id="stat1" class="qsfx-item"></div>
                <p class="qsfx-title">案件上报趋势分析</p>
            </div>
            <div class="relative">
                <div class="rcfx-item tagcloud">
                    <a :class="getBcClass(item)" :style="getBcStyle(item)" v-for="(item,index) in wordsList" :key="index" style="left: 75.735px; top: 25.157px; z-index: 6; opacity: 1.11422; position: absolute;">
                        <p>{{item.name}}</p>
                        <p class="rcfx-num">{{item.total}}</p>
                    </a>
                </div>
                <p class="rcfx-title">案件热词分析</p>
            </div>
        </div>
        <div class="right-bottom-item">
            <div class="tsfx-title">城市管理态势分析</div>
            <div class="tsfx-content">
                <div class="header-row">
                    <div class="header-row-cell f-header">
                        <span class="f-header-type">类型</span>
                        <span class="f-header-area">乡镇</span>
                    </div>
                    <div v-for="(item,index) in areaList" :key="index" class="header-row-cell">{{item}}</div>
                </div>
                <div v-for="(item,index) in sjList" :key="index" class="header-row">
                    <div v-for="(sItem,sIndex) in item" :key="sIndex" :class="getBgColor(sIndex,sItem)" class="header-row-cell content-row-cell">{{sIndex==0?sItem:""}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
import { sjsbOption, sjslOption, patsOption, qsfxOption } from "./statConfig";
import "./Bubble.js";
import "./scroll.js";
import Pubsub from "../../utils/pubsub";


import {queryOnlineInfo,queryNewestInfo,queryReportTrendInfo,queryHotWord,queryCityStatus} from "../../config/api";
export default {
    data() {
        return {
            onlinePerson:[0,0],
            ajqkList: [],
            commonRequest:{
                type:"",
            },
            areaList: [
                "肥乡镇",
                "天台山镇",
                "辛安镇镇",
                "大寺上镇",
                "东漳堡镇",
                "毛演堡镇",
                "元固乡",
                "西吕营镇",
                "旧店乡"
            ],
            sjList: [],
            maxNum: 439,
            wordsList: []
        };
    },
    mounted() {
        this.initData();
    },
    mounted(){
        this.pubsub_token1 = Pubsub.subscribe("refreshDpData", (t, args) => {
            let { type } = args;
            this.commonRequest.type = type;
            this.initData();
        });
        this.initData();
    },
    destroyed(){
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
    },
    methods: {
        initData() {
            this.myChart1 = echarts.init(document.getElementById("stat1"));
            this.myChart1.setOption(qsfxOption());
            this.hbfxScroll();
            this.queryOnlineInfo();
            this.queryNewestInfo();
            this.queryReportTrendInfo();
            this.queryHotWord();
            this.queryCityStatus();
        },
        hbfxScroll() {
            $(".hbfxContent").myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 32 //li的高度
            });
        },
        hotWords(){
            tagcloud({
                selector: ".tagcloud", //元素选择器
                fontsize: 12, //基本字体大小, 单位px
                radius: 72, //滚动半径, 单位px 页面宽度和高度的五分之一
                mspeed: "slow", //滚动最大速度, 取值: slow, normal(默认), fast
                ispeed: "slow", //滚动初速度, 取值: slow, normal(默认), fast
                direction: 135, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
                keep: false //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
            });
        },
        queryCityStatus(){
            queryCityStatus(this.commonRequest).then((result = {})=>{
                this.sjList = result.data || [];
            })
        },
        /**
         * 热词
         */
        queryHotWord(){
            queryHotWord(this.commonRequest).then((result = {})=>{
                this.wordsList = result.data || [];
                this.$nextTick(()=>{
                    this.hotWords();
                })
            })
        },
        /**
         * 上报趋势分析
         */
        queryReportTrendInfo(){
            queryReportTrendInfo(this.commonRequest).then((result = {})=>{
                let d = result.data;
                let x = d.xAxis;
                let series = [];
                let xAxis = {};
                let legend = {};
                xAxis.data = x;
                legend.data = d.legend;
                let s = d.series;
                s.map((item)=>{
                    series.push(Object.assign({type:"line",stack:"总量"},item))
                })
                this.myChart1.setOption({
                    xAxis,
                    series,
                    legend,
                })
            })
        },
        /**
         * 最新案件
         */
        queryNewestInfo(){

            queryNewestInfo({pageSize:5,pageNum:1}).then((result = {})=>{
                this.ajqkList = result.data.rows || [];
            })
        },
        /**
         * 在线人员
         */
        queryOnlineInfo(){
            queryOnlineInfo(this.commonRequest).then((result = {})=>{
                this.onlinePerson = result.data || [];
            })
        },
        /**
         * 获取案件状态颜色
         */
        getStatusClass(status) {
            switch (status) {
                case "上报":
                    return "status1";
                case "结案":
                    return "status2";
                case "受理":
                    return "status3";
                default:
                    return "status1";
            }
        },
        /**
         * 获取热词分析背景颜色
         */
        getBcClass(item) {
            let num = Math.ceil(Math.random() * 4);
            return `co0${num}`;
        },
        /**
         * 获取热词分析的大小
         */
        getBcStyle(item) {
            let max = 90,
                min = 60;
            let num = 60;
            if (min / max < item.total / this.maxNum) {
                num = item.total / this.maxNum * max;
            }
            return `width:${num}px;height:${num}px`;
        },
        /**
         * 获取事态分析背景颜色
         */
        getBgColor(index, color = "yellow") {
            if (index != 0) {
                return color;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../../css/dpCommon.scss";
@import "./Bubble.css";
.right-container {
    width: 946px;
    box-sizing: border-box;
    .top-item {
        display: flex;
        height: 285px;
        box-sizing: border-box;
        padding-top: 50px;
        .ryzx-item {
            width: 350px;
        }
        .ajqk-item {
            width: 555px;
        }
        .ryzx-bg {
            width: 180px;
            height: 217px;
            background: url("../../assets/dp5/sjbjl.png") no-repeat;
            background-size: 100% 100%;
            margin: 20px 0 0 80px;
            position: relative;
            .ryzx-title {
                width: 179px;
                height: 37px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #c8e1ff;
                font-size: 16px;
            }
            .ryzx-content {
                width: 156px;
                height: 168px;
                margin: 12px 0 0 10px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .num1 {
                font-size: 36px;
                color: #fff000;
            }
            .num-tag {
                font-size: 26px;
                margin: 0 3px;
                color: #d6efff;
            }
            .num2 {
                font-size: 26px;
                color: #d6efff;
            }
        }
        .ajqk-title {
            height: 40px;
            line-height: 30px;
            padding-left: 218px;
            color: #c8e1ff;
            font-size: 16px;
        }
        .hbfxContent{
            height: 202px;
            overflow: hidden;
        }
        .hbfx-stat {
            width: 555px;
            height: 194px;
            overflow: hidden;
            &-title {
                display: flex;
                padding: 5px 0 10px 0;
                text-align: center;
                font-size: 12px;
                color: #a7c7ff;
            }
            .title-row1 {
                flex: 1;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
            .title-row2 {
                width: 100px;
                text-align: center;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
        }
        .hbfx-stat-row {
            line-height: 32px;
            height: 32px;
            display: flex;
            font-size: 12px;
            padding: 0 5px;
            &:nth-child(even) {
                // background: rgba(0, 76, 255, 0.2);
                 background: rgba(0, 76, 255, 0.06);
            }
            &:nth-child(odd) {
                background: rgba(0, 76, 255, 0.06);
            }
            .stat-num {
                box-sizing: border-box;
                padding-left: 5px;
            }
            .status1 {
                color: #ff0000;
            }
            .status2 {
                color: #00f17f;
            }
            .status3 {
                color: #fffc00;
            }
        }
    }
    .right-middle-item {
        display: flex;
        box-sizing: border-box;
        padding-left: 30px;
        .qsfx-item {
            height: 300px;
            width: 450px;
            margin-top: 30px;
        }
        .qsfx-title {
            position: absolute;
            font-size: 16px;
            color: #c8e1ff;
            top: 29px;
        }
    }
    .right-bottom-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .tsfx-title {
            font-size: 16px;
            color: #c8e1ff;
            height: 30px;
            line-height: 30px;
            text-align: center;
            padding-left: 10px;
            box-sizing: border-box;
        }
        .tsfx-content {
            border: 1px solid #73849b;
            font-size: 12px;
            .header-row {
                border-bottom: 1px solid #73849b;
                &:last-child {
                    border-bottom: none;
                }
                display: flex;
                .header-row-cell {
                    height: 38px;
                    width: 80px;
                    line-height: 38px;
                    text-align: center;
                    border-right: 1px solid #73849b;
                    &:last-child {
                        border-right: none;
                    }
                }
                .content-row-cell {
                    height: 32px;
                    line-height: 32px;
                }
            }
        }
        .green {
            background-color: #007121;
        }
        .yellow {
            background-color: #bfc00a;
        }
        .orange {
            background-color: #bf890a;
        }
        .red {
            background-color: #ad020a;
        }
        .f-header {
            position: relative;
            color: #c8e1ff;
            &::before {
                content: "";
                position: absolute;
                left: 0px;
                top: -18px;
                width: 100%;
                height: 38px;
                box-sizing: border-box;
                border-bottom: 1px solid #73849b;
                transform-origin: bottom center;
                transform: rotateZ(25deg) scale(1.11);
            }
            &-type {
                position: absolute;
                left: 5px;
                bottom: 16px;
                height: 14px;
            }
            &-area {
                position: absolute;
                height: 14px;
                right: 8px;
                top: -8px;
            }
        }
    }
    .rcfx-item {
        height: 300px;
        width: 400px;
        margin-top: 28px;
    }
    .rcfx-num {
        line-height: 14px;
        bottom: 10px;
    }
    .rcfx-title {
        position: absolute;
        top: 40px;
        left: 36px;
        font-size: 16px;
        color: #c8e1ff;
    }
    .hbfx-content {
        // max-height: 160px;
        // overflow: hidden;
    }
}
</style>